<template>
  <div id="history" class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select class="filter-item" v-model="queryParams.groupId" placeholder="全部门站" @change="selectGroupChange">
        <el-option v-for="item in  groups" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select class="filter-item" v-model="query.sn" placeholder="全部仪表" @change="selectSNChange">
        <el-option v-for="item in  deviceList" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <el-date-picker class="filter-item"
        v-model="query.startTime"
        :format="format"
        :value-format="format"
        type="date"
        placeholder="选择起始日期">
      </el-date-picker>

      <el-date-picker class="filter-item"
        v-model="query.endTime" type="date"
        :value-format="format"
        :format="format"
        placeholder="选择终止日期">
      </el-date-picker>
      <el-button class="filter-item btn-ww" type="primary" @click="search">查询 </el-button>
    </div>
    <el-table class="table-border color-none":data="list" :row-class-name="tableRowClassName" border style="width: 100%" :loading="listLoading">
      <el-table-column type="index"  label="No"></el-table-column>
      <el-table-column prop="creation" label="time" align="center" ></el-table-column>
      <el-table-column :render-header="headerRender"  v-if="item.hide" :key='item.value' align="center" v-for='(item,index) in hisData' :label="item.en" :width="item.width?item.width:80">
        <template slot-scope="scope">
          {{zeroVals(item.value,scope.row[item.value])}}
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" :current-page.sync="query.pageNumber"
                     :page-sizes="[20, 30, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next" :total="total">
      </el-pagination>
    </div>

  </div>

</template>

<script>
  import { fetchList } from '../../../api/group'
  import { getHistory, fetchDeviceList,getDeviceByGroupId } from '../../../api/device'
  import { headerData, deviceKeyEnVal, units, zeroVals, hisData1 } from './HeaderData'
  import { fromat } from '../../../utils/index'
  export default {
    name: 'history',
    data() {
      return {
        headerData,
        deviceKeyEnVal,
        hisData: hisData1,
        date: [],
        groups: [],
        deviceList: [],
        query: {
          startTime: '', // yyyy-MM-dd'T'HH:mm:ss.SSSZ
          endTime: '',
          sn: '',
          pageNumber: 1,
          pageSize: 20
        },
        queryParams: {
          groupId: '',
          pageNumber: 1,
          pageSize: 10
        },
        format: 'yyyy-MM-dd HH:mm:ss',
        formHead: [],
        value5: '',
        total: 0,
        list: [],
        listLoading: false
      }
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'warning-row'
        }
        return ''
      },
      selectSNChange() {
        this.search()
      },
      selectGroupChange(groupId) {
        this.queryParams.groupId = groupId
        this.queryParams.pageNumber = 1
        this.getDevices()
      },
      getDevices() {
        getDeviceByGroupId(this.queryParams.groupId).then(res => {
          this.deviceList = res.data
        })
      },
      headerRender(h, { column, $index }) {
        let unit = ''
        if (units[column.label]) {
          unit = '(' + units[column.label] + ')'
        }
        const label = column.label + unit
        return h('el-tooltip', {
          props: {
            content: deviceKeyEnVal[column.label] || column.label,
            placement: 'top'
          }
        },
        [h('span', {
          style: {
            margin: '0 5px',
            display: 'inline-block',
            width: '100%'
          }
        }, label)])
      },
      parseTime: fromat,
      zeroVals,
      handleSizeChange(size) {
        this.query.pageSize = size
        this.getHistoryInfo()
      },
      handlePageChange(page) {
        this.query.pageNumber = page
        this.getHistoryInfo()
      },
      search() {
        if (!this.query.startTime || !this.query.endTime) {
          this.$message.error('起始时间和终止时间不能为空！')
          return
        }
        this.query.pageNumber = 1
        this.query.pageSize = 20
        this.getHistoryInfo()
      },
      getGroups() {
        this.listLoading = true
        fetchList().then(data => {
          if (data.data.length === 0) {
            this.$message.error('请先新建门站！')
          }
          this.groups = data.data
          this.queryParams.groupId = this.groups[0] ? this.groups[0].id : ''
          this.getDevices()
          this.listLoading = false
        })
      },
      getHistoryInfo() {
        if (!this.query.sn) {
          this.$message.error('sn不能为空')
          return
        }
        this.listLoading = true
        getHistory(this.query).then(response => {
          this.list = response.data.content
          this.total = response.data.totalElements
          this.listLoading = false
        })
      }
    },
    created() {
      this.getGroups()
      const now = new Date()
      this.query.endTime = this.parseTime(now, this.format)
      this.query.startTime = this.parseTime(new Date(now.getTime() - 30 * 24 * 3600 * 1000), this.format)
      // this.query.sn = this.$route.query.sn.replace(/\%00/g, '')
      // if (!this.$route.query.sn) {
      //   this.$message.error('sn不能为空')
      // }
      // const obj = JSON.parse(localStorage.getItem('current-items')) || this.headerData
      // if (obj) {
      this.formHead = this.headerData
      //   obj.forEach((val) => {
      //     if (val.index >= 0) {
      //       this.formHead.push(this.headerData[val.index])
      //     }
      //   })
      // }
      this.getHistoryInfo()
    },
    mounted() {
    }
  }
</script>

<style scoped>


</style>
